<template>
  <div class="three">
    <div class="canvas-container" ref="screenDom"></div>
  </div>
</template>

<script lang="ts" setup>
import * as THREE from "three";
import { ref, reactive, onMounted } from "vue";
import { gsap } from "gsap";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";

const screenDom = ref();

onMounted(() => {
  initThree();
});

const initThree = () => {
  // 创建场景
  const scene = new THREE.Scene();
  // 创建相机
  const camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  camera.position.set(0, 0, 10);
  // 创建渲染器
  const renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  // 将画布添加到页面中
  screenDom.value.appendChild(renderer.domElement);

  // // 创建一个星空的背景
  // const url = new URL('@/assets/images/bg.png', import.meta.url).href
  // const envTexture = new THREE.TextureLoader().load(url)
  // // envTexture.mapping = THREE.EquirectangularReflectionMapping
  // scene.background = envTexture
  // scene.environment = envTexture

  const render = () => {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
  };
  render();

  // 监听画面变化，更新渲染画面
  window.addEventListener("resize", () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(window.devicePixelRatio);
  });

  // 添加灯光
  const light = new THREE.DirectionalLight(0xffffff, 1);
  light.position.set(0, 0, 1);
  scene.add(light);

  // 设置解压缩的加载器
  const dracoLoader = new DRACOLoader();
  dracoLoader.setDecoderPath("./draco/");
  dracoLoader.setDecoderConfig({ type: "js" });
  const loader = new GLTFLoader();
  loader.setDRACOLoader(dracoLoader);
  // 卫星模型
  const xzModel = new URL("@/assets/models/xz.glb", import.meta.url).href;
  loader.load(xzModel, (gltf: any) => {
    gltf.scene.scale.set(0.1, 0.1, 0.1);
    gltf.scene.position.set(3, 0, 0);
    const timeline = gsap.timeline();
    timeline.to(gltf.scene.rotation, {
      x: 0,
      y: Math.PI * 2,
      duration: 6,
      ease: "none",
      repeat: -1,
    });
    scene.add(gltf.scene);
  });

  // 背景星星模型
  const starModel = new URL("@/assets/models/star.glb", import.meta.url).href;
  loader.load(starModel, (gltf: any) => {
    const moon = gltf.scene.children[0];
    for (let j = 0; j < 10; j++) {
      const moonInstance = new THREE.InstancedMesh(
        moon.geometry,
        moon.material,
        100
      );

      for (let i = 0; i < 100; i++) {
        const x = Math.random() * 1000 - 500;
        const y = Math.random() * 1000 - 500;
        const z = Math.random() * 1000 - 500;

        const matrix = new THREE.Matrix4();
        const size = Math.random() * 10 - 8;
        matrix.makeScale(size, size, size);
        matrix.makeTranslation(x, y, z);
        moonInstance.setMatrixAt(i, matrix);
      }

      gsap.to(moonInstance.position, {
        duration: Math.random() * 20 + 2,
        z: -1000,
        repeat: -1,
      });
      scene.add(moonInstance);
    }
  });
};
</script>

<style lang="scss" scoped>
@import "index.scss";
</style>
